<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本选择器示例</title>
  <style>
    /* 
      1.通配符选择器（*）选择匹配所有元素
      作用：清除元素默认的外边距和内边距，避免浏览器默认样式干扰 
    */
    * {
      margin: 0px;
      padding: 0px;
    }

    /* 
      2. 元素选择器（E） 
      作用：通过标签名选中所有 div 标签，统一设置宽高 
    */
    div {
      width: 200px;
      height: 200px;
    }

    /* 
      元素选择器（E） 
      作用：通过标签名选中所有 p 标签，统一设置字体大小 
    */
    p {
      font-size: 24px;
    }

    /* 
      3. 类选择器（.classname） 
      作用：通过 class 属性值选中对应元素，设置背景色 
      
    */
    /* .d1 {
      background-color: lightcoral;
    }

    .d2 {
      background-color: lightblue;
    } */
     
     .d {
      background-color: lightcoral;
    }

    /* 
      4. id 选择器（#id） 
      作用：通过 id 属性值选中对应元素，设置文字颜色和字体样式 
    */
    #p1 {
      color: olive;
      font-style: italic;
    }

    /* 
      5. 属性选择器 
      作用：通过标签+属性匹配选中元素，设置文字颜色 
      示例：选中 class 为 "hh" 的 h2 标签、id 为 "p2" 的 p 标签 
    */
    h2[class="hh"] {
      color: red;
    }

    p[id="p2"] {
      color: blue;
    }
  </style>
</head>

<body>

  <h2>今天天气不错</h2>

  <h2 class="hh">就是有点冷</h2>

  <div class="d d1"></div>
  <p id="p1">哈哈哈哈</p>
  <div class="d d2"></div>    <!-- 元素同时拥有 .d 和 .d1，会叠加两者的样式。 -->
  <p id="p2">呵呵呵呵</p>
</body>
</html>